<template>
    <div id="app">
        <mt-header fixed>
            <div class="sidebar_button" slot="left" @touchstart.prevent="moreVisible = !moreVisible">
                <div class="icon_img">
                    <img style="transform:rotate3d(1,0,0,180deg)" src="../img/icon/more.png">
                </div>
                <span class="count_num">1</span>
            </div>
            <div class="searchbar-discovery" v-show="selected === 'discovery'" slot="right">
                <div class="searchbox" @touchend.prevent="openSearchPages">
                    <i class="iconfont"></i>
                    <span class="search_recommend">
                        Marcus Warner
                    </span>
                </div>
                <div class="icon_img">
                    <img src="../img/icon/microphone.png">
                </div>
            </div>
            <div class="tab-podcast" v-show="selected === 'podcast'" slot="right">
                <div class="tabbox">
                    <a href="#" class="tabbox-item is-selected">听听</a>
                    <a href="#" class="tabbox-item">推荐</a>
                    <a href="#" class="tabbox-item">分类</a>
                </div>
                <div class="icon_img">
                    <img src="../img/icon/addSomeThing.png">
                </div>
            </div>
            <div class="info-my" v-show="selected === 'my'" slot="right">
                <div :class="{'infobox':true,'isUserDetailHide':isUserDetailHide}">
                    <div  v-if="userDetail">
                        <div class="headpic">
                            <img v-lazy="userDetail.profile.avatarUrl">
                        </div>
                        <div class="username">
                            <span>{{userDetail.profile.nickname}}</span>
                        </div>
                    </div>
                </div>
                <div class="icon_img">
                    <img src="../img/icon/search.png">
                </div>
            </div>
            <div class="tab-focus" v-show="selected === 'focus'" slot="right">
                <div class="tabbox">
                    <a href="#" class="tabbox-item">动态</a>
                    <a href="#" class="tabbox-item is-selected">云圈</a>
                </div>
                <div class="icon_img">
                    <img src="../img/icon/addSomeThing.png">
                </div>
            </div>
            <div class="tab-village" v-show="selected === 'village'" slot="right">
                <div class="tabbox">
                    <a href="#" class="tabbox-item">关注</a>
                    <a href="#" class="tabbox-item is-selected">推荐</a>
                </div>
                <div class="icon_img">
                    <img src="../img/icon/addSomeThing.png">
                </div>
            </div>
        </mt-header>
        <div class="container">
            <router-view></router-view>
        </div>
        <div class="controlMenu" @touchstart.prevent="nowPlaying != null?songVisible=true:''" :class="{'controlMenu':true,'controlMenu_Show':nowPlaying != null}">
            <audio ref="audio" src=""></audio>
            <div class="musicPic">
                <div v-if="nowPlaying != null">
                    <img v-lazy="nowPlaying.al.picUrl">
                </div>
            </div>
            <div class="musicTitle" v-if="nowPlaying != null">
                <p class="theTitle">
                    <span class="musicName" >{{nowPlaying.al.name}}</span>
                    <span class="author">{{nowPlaying.ar|formatName}}</span>
                </p>
            </div>
            <div class="musicProgress">
                <img src="../img/icon/play.png">
            </div>
            <div class="musicList" @touchstart.stop="playlistVisible = true">
                <img src="../img/icon/musiclist.png">
            </div>
        </div>
        <mt-tabbar v-model="selected" fixed>
            <mt-tab-item id="discovery">
                <img slot="icon" src="../img/icon/discovery.png">
                发现
            </mt-tab-item>
            <mt-tab-item id="podcast">
                <img slot="icon" src="../img/icon/podcast.png">
                播客
            </mt-tab-item>
            <mt-tab-item id="my">
                <img slot="icon" src="../img/icon/my.png">
                我的
            </mt-tab-item>
            <mt-tab-item id="focus">
                <img slot="icon" src="../img/icon/focus.png">
                关注
            </mt-tab-item>
            <mt-tab-item id="village">
                <img slot="icon" src="../img/icon/village.png">
                云村
            </mt-tab-item>
        </mt-tabbar>
        <div class="pop-up-layer-login" v-if="isLoginLayerShow">
            <div class="logo-box">
                <img src="../img/icon/discovery.png">
            </div>
            <div class="buttons-box">
                <div class="phone-login-button">
                    <button class="login-button" @touchstart.prevent="addPhonePages">手机号登录</button>
                </div>
                <div class="ignore-login-button">
                    <button class="login-button" @touchstart.prevent="closeLoginLayer">立即体验</button>
                </div>
                <div class="other-login-buttons">
                    <a href="#" class="wechat-login" @touchstart.prevent="cantWork">
                        <img src="../img/icon/wechat.png">
                    </a>
                    <a href="#" class="qq-login" @touchstart.prevent="cantWork">
                        <img src="../img/icon/qq.png">
                    </a>
                    <a href="#" class="sina-login" @touchstart.prevent="cantWork">
                        <img src="../img/icon/sina.png">
                    </a>
                    <a href="#" class="mail-login" @touchstart.prevent="openMailPages">
                        <img src="../img/icon/yi.png">
                    </a>
                </div>
                <div class="agreement-box">
                    <p class="agreement-text">登录即已同意<a>《用户协议》</a><a>《隐私政策》</a><a>《儿童隐私政策》</a></p>
                </div>
            </div>
            <div class="login-pages">
                <popuplayer @closePages='minusPhonePages' v-if="isPhonePShow == 1">
                    <img slot="left" src="../img/icon/cha.png">
                    <p class="pageName" slot="center">手机号登录</p>
                    <div class="pageContent" slot="content">
                        <div class="page-desc">
                            <p class="main_desc">
                                登录体验更多精彩
                            </p>
                            <p class="sub_desc">
                                未注册手机号登录后将自动创建账号
                            </p>
                        </div>
                        <div class="inputBox-phoneNum">
                            <div class="cc-list-button" @touchstart.prevent="popupVisible=true">
                                <span>+{{nowCountryCode}}</span><i class="iconfont"></i>
                            </div>
                            <div class="inputBox">
                                <input placeholder="请输入手机号" v-model="phoneNum" type="text">
                            </div>
                        </div>
                        <button @touchstart.prevent="sendMessage" class="login-button">下一步</button>
                        <mt-popup v-model="popupVisible" position="bottom">
                            <div class="indexList_title">
                                <div class="indexList_title_icon" @touchstart.prevent="closeCCPage">
                                    <img src="../img/icon/cha.png">
                                </div>
                                <div class="indexList_title_name">
                                    <p class="pageName" slot="center">选择国家和地区</p>
                                </div>
                            </div>
                            <mt-index-list>
                                <mt-index-section :index="item.label" v-for="(item,index) in countryCode.data.data" :key="index">
                                    <mt-cell v-on:touchstart.prevent.native="changeCountryCode(ite.code)" :value="'+'+ite.code" :title="ite.zh" v-for="(ite,inde) in item.countryList" :key="inde"></mt-cell>
                                </mt-index-section>
                            </mt-index-list>
                        </mt-popup>
                    </div>
                </popuplayer>
                <popuplayer @closePages='minusPhonePages' v-if="isPhonePShow == 2">
                    <div class="pageIcon" slot="left">
                        <img src="../img/icon/cha.png">
                    </div>
                    <div class="pageName" slot="center">
                        <p>手机号登录</p>
                    </div>
                    <div class="passwordLogin" slot="right" v-show="registerOrLogin.data.hasPassword" @touchstart.prevent="addPhonePages">
                        密码登录
                    </div>
                    <div class="pageContent" slot="content">
                        <div class="relate_info">
                            <p class="relate_info_tip">请输入验证码</p>
                            <p class="relate_info_subtip">
                                已发送至+{{nowCountryCode}} {{phoneNum_encrypt}}
                                <img @touchstart.prevent="minusPhonePages" src="../img/icon/modi.png">
                                <button :class="{disabledButton:countingNum != 0}" :disabled="countingNum != 0" @touchstart.prevent="startCount" class="countNum">{{countingNum==0?"重新发送":countingNum+'s'}}</button>
                            </p>
                        </div>
                        <div class="ver_code">
                            <ul class="ver_codes" @touchstart.prevent="getFocus">
                                <li>
                                    {{verCode[0]}}
                                    <span class="bottomLine"></span>
                                </li>
                                <li>
                                    {{verCode[1]}}
                                    <span class="bottomLine"></span>
                                </li>
                                <li>
                                    {{verCode[2]}}
                                    <span class="bottomLine"></span>
                                </li>
                                <li>
                                    {{verCode[3]}}
                                    <span class="bottomLine"></span>
                                </li>
                            </ul>
                            <input v-focus ref='ver_code_input' @input="handleInput" class="ver_code_input" type="text">
                        </div>
                    </div>
                </popuplayer>
                <popuplayer @closePages='minusPhonePages' v-if="isPhonePShow == 3">
                    <img slot="left" src="../img/icon/leftArrow.png">
                    <p class="pageName" slot="center">手机号登录</p>
                    <div class="pageContent" slot="content">
                        <div class="inputBox-password">
                            <input placeholder="请输入密码" v-model="phonePassword" type="password">
                        </div>
                        <button class="login-button" @touchstart.prevent="loginSystem(2)">登录</button>
                    </div>
                </popuplayer>
                <popuplayer @closePages='closeMailPages' v-if="isMailPShow">
                    <img slot="left" src="../img/icon/leftArrow.png">
                    <p class="pageName" slot="center">网易邮箱账号登录</p>
                    <div class="pageContent" slot="content">
                        <div class="inputBox-phoneNum">
                            <div class="inputBox">
                                <input v-model="mailAccount" placeholder="请输入邮箱账号" type="text">
                            </div>
                        </div>
                        <div class="inputBox-phoneNum">
                            <div class="inputBox">
                                <input v-model="mailPassword" placeholder="请输入密码" type="password">
                            </div>
                        </div>
                        <button class="login-button" @touchstart.prevent="loginSystem(3)">登录</button>
                    </div>
                </popuplayer>
            </div>
        </div>
        <mt-popup v-model="moreVisible" position="left">
            <div class="more_block">
                <div class="more-block-header">
                    <div class="headerInfo">
                        <div class="headpic">
                            <img v-if="userDetail" v-lazy="userDetail.profile.avatarUrl">
                        </div>
                        <div class="username" @touchstart.prevent="isLoginLayerShow = true;closeMoreLayer()">
                            <span>{{userDetail?userDetail.profile.nickname:"立即登录"}}</span>
                            <span class="iconfont icon-icon1"></span>
                        </div>
                    </div>
                    <div class="scanIt">
                            <span class="iconfont icon-saoma"></span>
                    </div>
                </div>
                <div class="more-block-content">
                    <div class="listBlock">
                        <mt-cell title="我的消息" is-link>
                            <span slot="icon" class="iconfont icon-wodexiaoxi"></span>
                            <mt-badge type="error" size="small">10</mt-badge>
                        </mt-cell>
                        <mt-cell title="云贝中心" is-link>
                            <span slot="icon" class="iconfont icon-sylogo2"></span>
                            <mt-button type="danger" size="small" plain>签到</mt-button>
                        </mt-cell>
                        <mt-cell title="创作者中心" is-link>
                            <span slot="icon" class="iconfont icon-dengpao"></span>
                        </mt-cell>
                    </div>
                    <div class="listBlock">
                        <div class="listBlock-title">
                            <span>音乐服务</span>
                        </div>
                        <mt-cell title="云村有票" is-link>
                            <span slot="icon" class="iconfont icon-piao"></span>
                        </mt-cell>
                        <mt-cell title="商城" is-link>
                            <span slot="icon" class="iconfont icon-shangcheng"></span>
                        </mt-cell>
                        <mt-cell title="游戏专区" is-link>
                            <span slot="icon" class="iconfont icon-youxi"></span>
                        </mt-cell>
                        <mt-cell title="口袋彩铃" is-link>
                            <span slot="icon" class="iconfont icon-cailing"></span>
                        </mt-cell>
                    </div>
                    <div class="listBlock">
                        <div class="listBlock-title">
                            <span>其他</span>
                        </div>
                        <mt-cell title="设置" is-link>
                            <span slot="icon" class="iconfont icon-chilun"></span>
                        </mt-cell>
                        <mt-cell title="夜间模式" is-link>
                            <span slot="icon" class="iconfont icon-yejianmoshi"></span>
                            <mt-switch style="transform:scale(.6)"></mt-switch>
                        </mt-cell>
                        <mt-cell title="定时关闭" is-link>
                            <span slot="icon" class="iconfont icon-dingshiguanbi"></span>
                        </mt-cell>
                        <mt-cell title="个性装扮" is-link>
                            <span slot="icon" class="iconfont icon-gexingzhuangban"></span>
                        </mt-cell>
                        <mt-cell title="边听边存" is-link>
                            <span slot="icon" class="iconfont icon-ting"></span>
                            <span class="isOpened">未开启</span>
                        </mt-cell>
                        <mt-cell title="在线听歌免流量" is-link>
                            <span slot="icon" class="iconfont icon-zaixiantinggemianliuliang"></span>
                        </mt-cell>
                        <mt-cell title="音乐黑名单" is-link>
                            <span slot="icon" class="iconfont icon-heimingdan"></span>
                        </mt-cell>
                        <mt-cell title="青少年模式" is-link>
                            <span slot="icon" class="iconfont icon-hudun"></span>
                            <span class="isOpened">未开启</span>
                        </mt-cell>
                        <mt-cell title="音乐闹钟" is-link>
                            <span slot="icon" class="iconfont icon-naozhong"></span>
                        </mt-cell>
                    </div>
                    <div class="listBlock">
                        <mt-cell title="我的订单" is-link>
                            <span slot="icon" class="iconfont icon-wodedingdan"></span>
                        </mt-cell>
                        <mt-cell title="优惠券" is-link>
                            <span slot="icon" class="iconfont icon-youhuiquan"></span>
                        </mt-cell>
                        <mt-cell title="我的客服" is-link>
                            <span slot="icon" class="iconfont icon-servicer"></span>
                        </mt-cell>
                        <mt-cell title="分享网易云音乐" is-link>
                            <span slot="icon" class="iconfont icon-fenxiang2"></span>
                        </mt-cell>
                        <mt-cell title="关于" is-link>
                            <span slot="icon" class="iconfont icon-guanyu"></span>
                        </mt-cell>
                    </div>
                    <div class="listBlock">
                        <a href="#" class="loginOutClose" @touchstart.prevent="loginOut">退出登录/关闭</a>
                    </div>
                </div>
            </div>
        </mt-popup>
        <mt-popup v-model="songVisible" position="bottom" v-if="playingPlaylist.length != 0">
            <div class="song_block">
                <div class="song_block_bg" :style="{backgroundImage:'url(' + nowPlaying.al.picUrl + ')'}"></div>
                <div class="song_block_bgl"></div>
                <div class="song_block_header">
                    <div class="sb-header-back" @touchstart.prevent="closeSongLayer">
                        <span class="iconfont icon-xiajiantou"></span>
                    </div>
                    <div class="sb-header-title">
                        <span class="header-main-title">{{nowPlaying.al.name}}</span>
                        <span class="header-sub-author">{{nowPlaying.ar|formatName}}</span>
                    </div>
                    <div class="sb-header-share">
                        <span class="iconfont icon-a-fenxiang"></span>
                    </div>
                </div>
                <div class="song_block_content" @click.prevent="switchDL">
                    <mt-tab-container v-model="songBlocks">
                        <mt-tab-container-item id="disc">
                            <div class="song-block-disc">
                                <div :class="{'player-bar':true,'player-bar-playing':playState}">
                                <img src="../img/icon/player_bar.png">
                                </div>
                                <div class="player-disc">
                                    <simpleswipe v-model="playlist_selected" :selected_="playlist_selected">
                                        <ssitem v-for="(item,index) in playingPlaylist" :key="index">
                                            <div :class="{'discBox':true,'whirlAnimate':true,'whirlAnimateState':!playState}" @touchend.prevent="isTrigger?switchDL():''">
                                                <div class="discpic">
                                                    <img v-lazy="item.al.picUrl">
                                                </div>
                                            </div>
                                        </ssitem>
                                    </simpleswipe>
                                </div>
                                <div class="other-function">
                                    <div class="addFavorite">
                                        <span class="iconfont icon-aixin"></span>
                                    </div>
                                    <div class="download">
                                        <span class="iconfont icon-xiazai"></span>
                                    </div>
                                    <div class="singSong">
                                        <span class="iconfont icon-genchang"></span>
                                    </div>
                                    <div class="theComments">
                                        <span class="iconfont icon-pinglun1"></span>
                                    </div>
                                    <div class="moreThing">
                                        <span class="iconfont icon-more-vertical"></span>
                                    </div>
                                </div>
                            </div>
                        </mt-tab-container-item>
                        <mt-tab-container-item id="lyrics">
                            <div class="song-block-lyrics">
                                <div class="volumeBox">
                                    <mt-range v-model="volumeValue" :min="0" :max="100" :step="10" :bar-height="3">
                                        <div slot="start" class="volumeBoxIcon">
                                            <span class="iconfont icon-yinliang"></span>
                                        </div>
                                    </mt-range>
                                </div>
                                <div ref="lyricsWrap" class="lyricsBox">
                                    <ul>
                                        <li v-for="(item,index) in songInformation.lyrics" :key="index">
                                            <p :class="{'nowLyrics':songInformation.currentTime *1000 >= item.timeStamp && songInformation.currentTime *1000 <= songInformation.lyrics[index+1].timeStamp}">
                                                {{item.text}}
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                                <div class="otherThingBox">
                                    <div class="otg1">
                                        <span class="iconfont icon-shoucang_shixin"></span>
                                    </div>
                                    <div class="otg2">
                                        <span class="iconfont">译</span>
                                    </div>
                                    <div class="otg3">
                                        <span class="iconfont icon-more-vertical"></span>
                                    </div>
                                </div>
                            </div>
                        </mt-tab-container-item>
                    </mt-tab-container>
                </div>
                <div class="song_block_control">
                    <div class="control-progress-bar">
                        <div class="progressBar">
                            <mt-range v-model="playProgress" :value="(songInformation.currentTime/(songInformation.duration/1000)) * 100" :min="0" :max="100" :step="1" :bar-height="3">
                                <div slot="start" class="currentTime">
                                    <span>{{songInformation.currentTime | formateTime}}</span>
                                </div>
                                <div slot="end" class="totalTime">
                                    <span>{{songInformation.duration | formateTime}}</span>
                                </div>
                            </mt-range>
                        </div>
                    </div>
                    <div class="control-controller control-function">
                        <div class="switchPlay">
                            <span class="iconfont icon-xunhuanbofang"></span>
                        </div>
                        <div class="previousOne" @touchend.prevent="playlist_selected >= 0 ? --playlist_selected:playlist_selected = 0">
                            <span class="iconfont icon-shangyishoushangyige"></span>
                        </div>
                        <div class="playNow" @touchend.prevent="switchPlay">
                            <span :class="{'iconfont':true,'icon-bofang1':!playState,'icon-zanting':playState}"></span>
                        </div>
                        <div class="nextOne" @touchend.prevent="playlist_selected < playingPlaylist.length?++playlist_selected:playingPlaylist.length-1">
                            <span class="iconfont icon-shangyishoushangyige1"></span>
                        </div>
                        <div class="playQueue" @touchstart.prevent="playlistVisible = true">
                            <span class="iconfont icon-24gf-playlist"></span>
                        </div>
                    </div>
                </div>
            </div>
        </mt-popup>
        <div class="pop-up-layer-playlist-block">
            <mt-popup v-model="playlistVisible" position="bottom">
                <div class="pl_block">
                    <div class="pl-header">
                        <div class="plTitle">当前播放({{playingPlaylist.length}})</div>
                        <div class="plFunction">
                            <div class="plmode">
                                <span class="iconfont icon-xunhuanbofang"></span>
                                列表循环
                            </div>
                            <div class="plcollect">
                                <span class="iconfont icon-jiarufandou"></span>
                                收藏全部
                            </div>
                            <div class="pldelete">
                                <span class="iconfont icon-xiazai14"></span>
                            </div>
                        </div>
                    </div>
                    <div class="pl-content">
                        <selectedtab v-model="playlist_selected" v-if="playingPlaylist.length != 0">
                            <tabitem :id="index" v-for="(item,index) in playingPlaylist" :key="index" :selected_="playlist_selected">
                                <div slot="left">
                                    <span class="iconfont icon-zhengzaibofang"></span>
                                </div>
                                <div slot="center" class="songinfo">
                                    <span class="songinfoname">{{item.al.name}}</span>
                                    <span class="songinfoauthor">- {{item.ar | formatName}}</span>
                                </div>
                                <div slot="right" class="songdelete">
                                    <span class="iconfont icon-shanchu"></span>
                                </div>
                            </tabitem>
                        </selectedtab>
                    </div>
                </div>
            </mt-popup>
        </div>
        <mt-popup v-model="searchVisible" position="bottom">
            <div class="search_block" >
                <div class="search_block_header">
                    <div class="sbh-back" @touchend.prevent="closeSearchPages">
                        <span class="iconfont icon-leftarrowpx"></span>
                    </div>
                    <div class="sbh-bar">
                        <form action="javascript:void 0" class="sbh-bar-input">
                            <input @input="inputSearch" @keyup.13="beginSearch(searchRelate.searchInput)" v-model="searchRelate.searchInput" class="sbh-bar-input" type="text" @>
                        </form>
                        <div class="sbh-bar-default" v-if="!searchRelate.searchInput">默认结果</div>
                    </div>
                </div>
                <div v-if="searchRelate.searchStep == 0">
                    <div class="sbh-bar-advice" v-if="searchRelate.searchInput">
                        <ul class="sbh-bar-advice-list">
                            <li v-for="(item,index) in searchRelate.searchAdvice" @touchend.prevent="beginSearch(item.name)" :key="index">
                                <div class="list-item-icon">
                                    <span class="iconfont icon-search"></span>
                                </div>
                                <div class="list-item-content">
                                    {{item.name}}
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div :class="{'search_block_searchHistory':true,'leaveItBe':true}" v-if="searchRelate.searchHistory.length!=0">
                        <div class="sbsh-title">历史</div>
                        <div class="sbsh-content">
                            <ul ref="dragBar" class="sbsh-content-wrap" @touchstart='handleTouchDown' @touchmove='handleTouchMove' @touchend="handleTouchEnd">
                                <li class="sbsh-content-wrap-item" v-for="(item,index) in searchRelate.searchHistory" @touchend.prevent="isTrigger?beginSearch(item):''" :key="index">{{item}}</li>
                            </ul>
                        </div>
                        <div class="sbsh-trash" @touchend.prevent="clearSearchHistory">
                            <span class="iconfont icon-xiazai14"></span>
                        </div>
                    </div>
                    <div :class="{'search_block_hot':true,'leaveItBe':searchRelate.searchHistory.length==0}" v-if="searchRelate.isItTimeShow">
                        <div class="sbh-navbar">
                            <mt-navbar v-model="searchRelate.searchHotNavbar">
                                <mt-tab-item id="1">热搜榜</mt-tab-item>
                                <mt-tab-item id="2">视频榜</mt-tab-item>
                                <mt-tab-item id="3">播客榜</mt-tab-item>
                            </mt-navbar>
                        </div>
                        <div class="sbh-content">
                            <mt-tab-container v-model="searchRelate.searchHotNavbar">
                                <mt-tab-container-item id="1">
                                    <div class="sbh-content-list">
                                        <div :class="{'sbh-content-list-item':true,'veryHot':index<=2}" v-for="(item,index) in searchRelate.searchHotText.data" @touchend="beginSearch(item.searchWord)" :key="index">
                                            <span class="hotSearchIndex">{{index + 1}}</span>
                                            <span class="hotSearchName">{{item.searchWord}}</span>
                                            <div class="hotSearchIcon" v-if="item.iconUrl">
                                                <img :src="item.iconUrl">
                                            </div>
                                        </div>
                                    </div>
                                </mt-tab-container-item>
                                <mt-tab-container-item id="2">
                                    <p style="text-align:center;padding:30px">暂时还没有内容哦</p>
                                </mt-tab-container-item>
                                <mt-tab-container-item id="3">
                                    <p style="text-align:center;padding:30px">这个也没有内容哦</p>
                                </mt-tab-container-item>
                            </mt-tab-container>
                        </div>
                    </div>
                    <div class="loadingAnimate" v-if="!searchRelate.isItTimeShow">
                        <ul class="strip-loading">
                            <li style="--line-index: 1;"></li>
                            <li style="--line-index: 2;"></li>
                            <li style="--line-index: 3;"></li>
                            <li style="--line-index: 4;"></li>
                            <li style="--line-index: 5;"></li>
                            <li style="--line-index: 6;"></li>
                        </ul>
                        <span class="loadingText">正在加载……</span>
                    </div>
                </div>
                <div v-if="searchRelate.searchStep == 1">
                    <div :class="{'search_block_result':true,'leaveItBe':true}">
                        <mt-navbar v-model="searchRelate.searchHotNavbar">
                            <mt-tab-item id="1"><span>单曲</span></mt-tab-item>
                            <mt-tab-item id="2"><span>歌单</span></mt-tab-item>
                            <mt-tab-item id="3"><span>歌手</span></mt-tab-item>
                        </mt-navbar>
                    </div>
                    <div class="search_block_result_content">
                        <mt-tab-container v-model="searchRelate.resultPage">
                            <mt-tab-container-item id="song">
                                <div class="sbrc_song" v-if="searchRelate.resultData.songs">
                                    <ul class="sbrc_song_list">
                                        <li class="sbrc_song_list_item" v-for="(item,index) in searchRelate.resultData.songs.result.songs" :key="index">
                                            <div class="sbrc_song_list_item_title">
                                                <div class="mainTitle">
                                                    {{item.name}}
                                                </div>
                                                <div class="subTitle">
                                                    {{item.artists | formatName}}
                                                </div>
                                            </div>
                                            <div class="sbrc_song_list_item_more">
                                                <span class="iconfont icon-more-vertical"></span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </mt-tab-container-item>
                            <mt-tab-container-item id="playlist">
                                <div class="sbrc_playlist" v-if="searchRelate.resultData.playlists">
                                    <ul class="sbrc_playlist_list">
                                        <li v-for="(item,index) in searchRelate.resultData.playlists" :key="index">
                                            {{item.name}}
                                        </li>
                                    </ul>
                                </div>
                            </mt-tab-container-item>
                            <mt-tab-container-item id="author">
                                <div class="sbrc_author">
                                    <ul class="sbrc_playlist_list" v-if="searchRelate.resultData.authors">
                                        <li v-for="(item,index) in searchRelate.resultData.playlists" :key="index">
                                            {{index}}
                                        </li>
                                    </ul>
                                </div>
                            </mt-tab-container-item>
                        </mt-tab-container>
                    </div>
                </div>
            </div>
        </mt-popup>
    </div>
</template>
<script>
    import {request} from "../js/request.js";
    import popuplayer from "../component/popUpLayer.vue";
    import simpleswipe from "../component/simpleSwipe.vue";
    import ssitem from "../component/ssItem.vue";
    import selectedtab from '../component/selectedTab.vue';
    import tabitem from "../component/tabitem.vue"
    import {Toast} from 'mint-ui';
    import { MessageBox } from 'mint-ui';
    export default {
        components:{
            popuplayer,
            simpleswipe,
            ssitem,
            selectedtab,
            tabitem
        },
        directives:{
            focus:{
                inserted(el){
                    el.focus();
                }
            }
        },
        computed:{
            phoneNum_encrypt(){
                let frontNum = this.phoneNum.substring(0,3);
                let endNum = this.phoneNum.substring(7,11);
                return frontNum + "****" + endNum;
            },
            nowPlaying(){
                let result = this.playingPlaylist[this.playlist_selected];
                return result
            }
        },
        data(){
            return {
                songBlocks:"lyrics",
                selected:"discovery",
                nowCountryCode:"86",
                playlist_selected:0,
                isPhonePShow:0,
                countingNum:0,
                volumeValue:50,
                playProgress:0,
                bottomLine:"",
                phoneNum:"",
                phonePassword:"",
                mailAccount:"",
                mailPassword:"",
                timer:"",
                scrollFun:"",
                userDetail:"",
                isTrigger:"",
                touchRelate:{
                    x:"",xOrigin:"",moveDistance:""
                },
                searchRelate:{
                    searchInput:"",
                    searchAdvice:"",
                    searchHistory:[],
                    searchHotNavbar:"1",
                    searchHotText:"",
                    searchStep:0,
                    resultPage:"song",
                    resultData:{
                        songs:"",
                        playlists:"",
                        authors:""
                    },
                    isItTimeShow:false
                },
                songInformation:{
                    id:"",
                    lyrics:[],
                    duration:0,
                    currentTime:0
                },
                verCode:[],
                playingPlaylist:[],
                isMailPShow:false,
                isLoginLayerShow:true,
                popupVisible:false,
                isUserDetailHide:true,
                moreVisible:false,
                songVisible:false,
                playlistVisible:false,
                searchVisible:false,
                playState:false,
                scrollTouch:true,
                countryCode:{url:"/countries/code/list",data:""},
                registerOrLogin:{url:"/cellphone/existence/check?phone=",data:""},
            }
        },
        created(){
            sessionStorage.clear();
            if(localStorage.getItem('playingPlaylist') != null){
                this.playingPlaylist = JSON.parse(localStorage.getItem('playingPlaylist'));
            }
            if(localStorage.getItem('playlist_selected') != null){
                this.playlist_selected = localStorage.getItem('playlist_selected');
            }
            this.$bus.on('switchLoginLayer',(value)=>{
                this.isLoginLayerShow = value;
            })
            this.$bus.on("isUserDetailHide",(value)=>{
                this.isUserDetailHide = value;
            })
            this.$bus.on('openSongVisible',(value,index)=>{
                this.songVisible = true;
                this.playingPlaylist.length = 0;
                this.playingPlaylist.push.apply(this.playingPlaylist,value);
                this.playlist_selected = index;
                this.getSong();
            })
            this.$bus.on('getTrigger',value=>{
                this.isTrigger = value;
            })
        },
        mounted(){
            request({url:this.countryCode.url}).then(value=>{
                this.countryCode.data = value;
            })
            request({url:"/login/status?cookie=" + this.getCookie("token") + "&tampTime" + new Date()}).then(value=>{
                if(value.data.account){
                    this.isLoginLayerShow = false;
                    request({url:"/user/detail?uid=" + value.data.account.id}).then(val=>{
                        this.userDetail = val;
                    })
                }
            })
            this.setSongInformation();
            this.addEventListeners();
            this.$refs.audio.volume = this.volumeValue / 100;
            if(localStorage.getItem('searchHistory') != null){
                if(typeof localStorage.getItem('searchHistory') == 'string'){
                    this.searchRelate.searchHistory = localStorage.getItem('searchHistory').split(',');
                }
            }
        },
        beforeDestroy(){
            this.removeEventListeners();
        },
        methods:{
            inputSearch(){
                request({url:"/search/suggest?type='mobile'&keywords=" + this.searchRelate.searchInput}).then(value=>{
                    this.searchRelate.searchAdvice = value.result.songs;
                })
            },
            beginSearch(searchValue){
                let canRecord = this.searchRelate.searchHistory.every(item=>{
                    return item != searchValue;
                })
                if(canRecord){
                    this.searchRelate.searchHistory.unshift(searchValue);
                    localStorage.setItem('searchHistory',this.searchRelate.searchHistory)
                };
                
                if(this.searchRelate.resultPage == 'song'){
                    request({url:"search?type=" + '1' + '&keywords=' + searchValue}).then(value=>{
                        this.searchRelate.resultData.songs = value;
                        console.log(value);
                    })
                }else if(this.searchRelate.resultPage == 'playlist'){
                    request({url:"search?type=" + '1000' + '&keywords=' + searchValue}).then(value=>{
                        this.searchRelate.resultData.playlists = value;
                    })
                }else if(this.searchRelate.resultPage == 'author'){
                    request({url:"search?type=" + '100' + '&keywords=' + searchValue}).then(value=>{
                        this.searchRelate.resultData.authors = value;
                    })
                }
                this.searchRelate.searchInput = "";
                if(this.searchRelate.searchStep < 1){
                    ++this.searchRelate.searchStep
                }
            },
            clearSearchHistory(){
                MessageBox({title:" ",showCancelButton:true,message:"确定清空全部历史记录",confirmButtonText:"清空"}).then(action => {
                    if(action == 'confirm'){
                        this.searchRelate.searchHistory = new Array();
                        localStorage.removeItem('searchHistory');
                    }
                });
            },
            handleTouchDown(){
                this.$bus.emit('touchdown',this.touchRelate);
            },
            handleTouchMove(){
                this.$bus.emit('touchmove',this.touchRelate);
            },
            handleTouchEnd(){
                this.$bus.emit('touchend')
            },
            recognizeLyrics(str){
                let tempLyrics = str.split("\n");
                let separateLyrics = new RegExp(/[^\d\[\]:.]+/,'g');
                let separateTimeStamp = new RegExp(/(\d+:\d+.\d+)/,'g');
                this.songInformation.lyrics = new Array();
                tempLyrics.forEach(item=>{
                    let timeStamp = item.match(separateTimeStamp) + '';
                    let min = parseInt(timeStamp.substr(0,2));
                    let sec = parseInt(timeStamp.substr(3,2));
                    let ms = parseInt(timeStamp.substr(6,2));
                    let result = (min*60)*1000 + sec*1000 + ms
                    this.songInformation.lyrics.push({text:item.match(separateLyrics) != null ? item.match(separateLyrics) + '':' ',timeStamp:result});
                })
            },
            cantWork(){
                Toast("此功能暂未开放");
            },
            addPhonePages(){
                this.isPhonePShow++;
            },
            minusPhonePages(){
                this.isPhonePShow--;
            },
            openSearchPages(){
                this.searchVisible = true;
                if(sessionStorage.getItem('searchHot') != null && sessionStorage.getItem('searchHot') != 'undefined'){
                    console.log("hello world")
                    this.searchRelate.searchHotText = JSON.parse(sessionStorage.getItem('searchHot'));
                    this.searchRelate.isItTimeShow = true;
                }else{
                    request({url:"search/hot/detail"}).then(value=>{
                        this.searchRelate.searchHotText = value
                        sessionStorage.setItem('searchHot',JSON.stringify(value));
                        if(value.code >= 200 && value.code < 300){
                            this.searchRelate.isItTimeShow = true;
                        }
                        console.log(value);
                    }).catch(error=>{
                        console.log(error);
                    });
                }
            },
            openMailPages(){
                this.isMailPShow = true;
            },
            closeSearchPages(){
                this.searchVisible = false;
            },
            closeMailPages(){
                this.isMailPShow = false;
            },
            closeLoginLayer(){
                this.isLoginLayerShow = false
            },
            closeMoreLayer(){
                this.moreVisible = false;
            },
            closeCCPage(){
                this.popupVisible = false;
            },
            closeSongLayer(){
                this.songVisible =false;
            },
            handleInput(){
                if(this.$refs.ver_code_input.value.length <= 4){
                    this.verCode=this.$refs.ver_code_input.value.split('');
                }else{
                    this.$refs.ver_code_input.value = this.verCode.join('');
                }
                if(this.verCode.length == 4){
                    request({url:"/captcha/verify?phone=" + this.phoneNum + "&captcha=" + this.verCode.join('') + "&timestamp=" + new Date()}).then(value=>{
                        if(value.data){
                            console.log(this.verCode.join(''))
                            request({
                                url:"/login/cellphone",
                                data:{
                                    phone:this.phoneNum,
                                    captcha:this.verCode.join('')
                                }
                            }).then(val=>{
                                console.log(val);
                            })
                        }
                    }).catch((error)=>{
                        Toast({
                            message: '验证码错误',
                            position: 'top',
                        });
                    })
                }
                this.bottomLine = document.querySelectorAll(".bottomLine");
                this.bottomLine.forEach((item,index) =>{
                    if(this.verCode[index] != undefined){
                        item.style.width = "100%";
                    }
                    else{
                        item.style.width = "0%"
                    }
                })
            },
            changeCountryCode(value){
                this.nowCountryCode = value;
                this.closeCCPage();
            },
            getFocus(){
                this.$refs.ver_code_input.focus();
            },
            sendMessage(){
                if(this.phoneNum != 0){
                    let expression = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|19[0|1|2|3|5|6|7|8|9])\d{8}$/g;
                    if(expression.test(this.phoneNum)){
                        request({url:this.registerOrLogin.url + this.phoneNum}).then(value=>{
                            this.registerOrLogin.data = value;
                            if(this.registerOrLogin.data){
                                this.addPhonePages();
                            }
                            if(this.registerOrLogin.data.exist){
                                this.loginSystem(1);
                            }else{
                                this.registerSystem();
                            }
                        }).catch(err=>{
                            Toast({
                                message: '发送失败，请重试/(ㄒoㄒ)/~~',
                                position: 'middle',
                            });
                        })
                    }else{
                        Toast({
                            message: '请输入11位的手机号',
                            position: 'top',
                        });
                    }
                }else{
                    Toast({
                            message: '请输入手机号',
                            position: 'top',
                    });
                }
            },
            loginSystem(which){
                let theCookie = "";
                switch(which){
                    case 1:
                        request({url:"/captcha/sent?phone=" + this.phoneNum + '&ctcode=' + this.nowCountryCode}).then(value=>{
                            if(value.data){
                                this.startCount();
                            }
                        }).catch(error=>{
                            Toast({
                                message:"验证码发送失败",
                                position:"top"
                            })
                        })
                        break;
                    case 2:
                        request({
                                url:"/login/cellphone",
                                method:"POST",
                                data:{
                                    phone:this.phoneNum,
                                    password:this.phonePassword,
                                    timestamp:new Date()
                                }
                            }).then(value=>{
                            theCookie = encodeURIComponent(value.cookie);
                            document.cookie = this.setCookie('token',theCookie);
                            this.isLoginLayerShow = false;
                            window.location.reload();
                            request({url:"/login/status?cookie=" + this.getCookie("token") + "&timestamp" + new Date()}).then(val=>{
                                if(val.data.account){
                                    this.isLoginLayerShow = false;
                                    request({url:"/user/detail?uid=" + val.data.account.id}).then(result=>{
                                        this.userDetail = result;
                                    })
                                }
                            })
                            if(value.code == 502){
                                Toast({
                                    message:value.msg,
                                    position:"middle"
                                })
                            }
                        });
                        break;
                    case 3:
                        let expression = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g;
                        if(expression.test(this.mailAccount)){
                            request({url:"/login?email=" + this.mailAccount + "&password=" + this.mailPassword}).then(value=>{
                                data = value;
                                if(value.code == 502){
                                    Toast({
                                        message:value.msg,
                                        position:"middle"
                                    })
                                }
                            });    
                        }else{
                            Toast({
                                message: '邮箱账号格式错误',
                                position: 'top',
                            });
                        }
                        break;
                }
            },
            loginOut(){
                this.delCookie('token');
                this.closeMoreLayer();
                window.location.reload();
            },
            setCookie(name,value){
                document.cookie = name + "="+ escape (value);
            },
            getCookie(name){
                var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
                if(arr=document.cookie.match(reg))
                    return unescape(arr[2]);
                else
                    return null;
            },
            delCookie(name){
                var exp = new Date();
                exp.setTime(exp.getTime() - 1);
                var cval=this.getCookie(name);
                if(cval!=null){
                    document.cookie= name + "="+cval+";expires="+exp.toGMTString();
                }
            },
            startCount(){
                this.countingNum = 60;
                clearInterval(this.timer);
                this.timer = window.setInterval(()=>{
                    this.countingNum--;
                    if(this.countingNum == 0){
                        clearInterval(this.timer);
                    }
                },1000)
            },
            getSong(){
                request({url:"search?keywords=" + this.nowPlaying.al.name}).then(value=>{
                    this.songInformation.id = value.result.songs[0].id;
                    this.songInformation.duration = value.result.songs[0].duration;
                    request({url:"lyric?id=" + this.songInformation.id}).then(value=>{
                        this.recognizeLyrics(value.lrc.lyric);
                    })
                    request({url:"song/url?id=" + this.songInformation.id}).then(val=>{
                        console.log(val);
                        if(val.data[0].url != null){
                            this.$refs.audio.src = val.data[0].url;
                        }else{
                            Toast({
                                message: '很抱歉，当前歌曲无法播放！',
                                position: 'middle'
                            });
                        }
                    })
                })
            },
            switchPlay(){
                this.playState = !this.playState;
                if(this.playState){
                    this.$refs.audio.play();
                }else{
                    this.$refs.audio.pause();
                }
            },
            switchDL(){
                if(this.songBlocks == 'disc'){
                    this.songBlocks = 'lyrics';
                }else{
                    this.songBlocks = 'disc';
                }
            },
            setSongInformation(){
                let tempPos;
                this.songInformation.currentTime = this.$refs.audio.currentTime;
                if(this.songInformation.currentTime >= this.songInformation.duration){
                    this.playState = false
                }
                if(document.querySelector('.nowLyrics')){
                    tempPos = document.querySelector('.nowLyrics').offsetTop;
                    if(tempPos >= this.$refs.lyricsWrap.offsetHeight / 2 && this.scrollTouch){
                        this.$refs.lyricsWrap.scrollTop = tempPos - this.$refs.lyricsWrap.offsetHeight / 2;
                    }
                }
            },
            addEventListeners(){
                this.$refs.lyricsWrap.addEventListener('touchstart',()=>{
                    this.scrollTouch = false
                })
                this.$refs.lyricsWrap.addEventListener('touchend',()=>{
                    this.scrollTouch = true
                })
                this.$refs.audio.addEventListener('abort',()=>{
                    this.playState = false;
                })
                this.$refs.audio.addEventListener('timeupdate',this.setSongInformation);
                this.$refs.audio.addEventListener('canPlay',this.setSongInformation);
                this.$refs.audio.addEventListener('pause',()=>{
                    this.playState = false
                })
            },
            removeEventListeners(){
                this.$refs.lyricsWrap.removeEventListener('touchstart',()=>{
                    this.scrollTouch = false
                })
                this.$refs.lyricsWrap.removeEventListener('touchend',()=>{
                    this.scrollTouch = true
                })
                this.$refs.audio.removeEventListener('abort',()=>{
                    this.playState = false;
                })
                this.$refs.audio.removeEventListeners('timeupdate',this.setSongInformation);
                this.$refs.audio.removeEventListeners('canPlay',this.setSongInformation);
                this.$refs.audio.removeEventListener('pause',()=>{
                    this.playState = false
                })
            }
        },
        watch:{
            playProgress(value){
                if(value){
                    this.songInformation.currentTime = parseInt((value / 100) * (this.songInformation.duration/1000))
                    this.$refs.audio.currentTime = this.songInformation.currentTime;
                }
                
            },
            volumeValue(value){
                this.$refs.audio.volume=value/100;
            },
            playingPlaylist(value){
                localStorage.setItem('playingPlaylist',JSON.stringify(value));
            },
            playlist_selected(value){
                localStorage.setItem('playlist_selected',value);
                this.getSong();
            },
            selected(value){
                switch(value){
                    case "discovery":
                        this.$router.push('/discovery').catch((err)=>err);
                        break;
                    case "podcast":
                        this.$router.push('/podcast').catch((err)=>err);
                        break;
                    case "my":
                        this.$router.push('/my').catch((err)=>err);
                        break;
                    case "focus":
                        this.$router.push('/focus').catch((err)=>err);
                        break;
                    case "village":
                        this.$router.push('/village').catch((err)=>err);
                        break;
                }
            },
            isPhonePShow(value){
                value < 0 ? this.isPhonePShow = 0:this.isPhonePShow;
                value > 3 ? this.isPhonePShow = 3:this.isPhonePShow;
            },
            $route:{
                handler(route){
                    switch(route.path){
                        case "/discovery":
                            this.selected = "discovery";
                            break;
                        case "/podcast":
                            this.selected = "podcast";
                            break;
                        case "/my":
                            this.selected = "my";
                            break;
                        case "/focus":
                            this.selected = "focus";
                            break;
                        case "/village":
                            this.selected = "village";
                            break;
                    }
                }
            }
        },
        filters:{
            formatNumCount(value){
                if(value>99999 && value < 99999999){
                    return parseInt(value / 10000) + "万";
                }
                else if(value > 99999999){
                    return parseInt(value / 100000000) + "亿";
                }
                else{
                    return value;
                }
            },
            formatName(value){
                let arrs = value.map(item=>{
                    return item.name
                })
                return arrs.join('/')
            },
            formateTime(value){
                /* let time = parseInt(value / 1000); */
                let time = parseInt(value > 999?value/1000:value);
                let min = Math.floor(time/60%60);
                let sec = Math.floor(time % 60);
                return (min < 10?"0" + min:min) + ":" +(sec < 10?"0" + sec:sec);
            }
        }
    }
</script>